/**
 * Created by a1 on 16/4/25.
 */
var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
var height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
var canvas
var ctx
var color = "#22ddcc"
var color2 = "#ddcc22"

function init() {
    canvas = document.getElementById("canvas")
    ctx = canvas.getContext("2d")
    saveVisits()
    changeSize()
}

function saveVisits() {
    if(localStorage.pageCount) {
        localStorage.pageCount = Number(localStorage.pageCount) + 1
    }else {
        localStorage.pageCount = 1
    }


    if(sessionStorage.pageCount) {
        sessionStorage.pageCount = Number(sessionStorage.pageCount) + 1
    }else {
        sessionStorage.pageCount = 1
    }

    var p = document.getElementById("pagecount")
    //p.innerHTML = p.innerHTML.replace('%d',localStorage.pageCount)
    p.innerHTML = "您浏览了"+localStorage.pageCount+"||" + sessionStorage.pageCount + "次!"
}

function changeSize() {
    document.getElementById("div").style.width = width * 0.8 + "px"
    canvas.width = width * 0.8
    canvas.height = height * 0.8
}

function onClick(ev) {
    //alert("x = " + canvas.offsetLeft + ", y = " + canvas.offsetTop + ", width = " + canvas.offsetWidth + "height = " + canvas.offsetHeight)
    drawCircle(ev.clientX - canvas.offsetLeft, ev.clientY - canvas.offsetTop)
}

//function draw() {
//    drawRect()
//    drawLine()
//}

function drawRect() {
    //ctx.fillStyle = color
    var gradient = ctx.createLinearGradient(10, 10, 100, 100)
    gradient.addColorStop(0, color)
    gradient.addColorStop(1, color2)
    ctx.fillStyle = gradient
    ctx.fillRect(10, 10, 100, 100)
}

function drawCircle(x, y) {
    ctx.strokeStyle = color
    ctx.fillStyle = color2
    ctx.beginPath()
    ctx.arc(x, y, 15, 0, Math.PI * 2, true)
    ctx.closePath()
    ctx.stroke()
    ctx.fill()
}

function drawLine() {
    ctx.strokeStyle = color2
    ctx.moveTo(100, 100)
    ctx.lineTo(100, 200)
    ctx.bezierCurveTo(200, 100, 300, 300, 400, 200)
    ctx.stroke()
}

function drawImage() {
    var img = new Image()
    img.src = "../image/riven.jpg"
    //img.scale(0.5, 0.5)
    //img.style.width = 128
    //img.height = 128
    ctx.drawImage(img, 0, 0)
}
